<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Row :gutter="16">
                <Form :model="formInline">
                <Col span="4"><Input type="text" placeholder="请输入姓名/电话" /></Col>
                <Col span="3">
                <Select v-model="formInline.room" clearable>
                <Option value="一诊">一诊</Option>
                <Option value="二诊">二诊</Option>
                </Select>
                </Col>
                <Col span="3">
                    <Select v-model="formInline.department" placeholder="请选择部门" clearable >
                        <Option value="门诊部">门诊部</Option>
                        <Option value="网络部">网络部</Option>
                        <Option value="运营部">运营部</Option>
                    </Select>
               </Col>
                <Col span="3">
                <Select v-model="formInline.post" placeholder="请选择岗位" clearable >
                <Option value="医助">医助</Option>
                <Option value="客服">客服</Option>
            </Select>
            </Col>
             <Col span="3">
            <Select v-model="formInline.role"  placeholder="请选择角色" clearable >
                <Option value="医助角色">医助角色</Option>
                <Option value="客服角色">客服角色</Option>
            </Select></Col>
            </Col>
            <Col span="4"><Button type="primary" @click="handleAllocation">新增</Button></Col>
            </Form>
            </Row>
            <Table :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="status">
                    <Button v-if="row.status ==='1'" type="success" size="small">启用</Button>
                    <Button v-if="row.status ==='0'" type="error" size="small">停用</Button>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation">编辑</a>
                </template>
            </Table>
            <div class="ivu-mt iuv-text-center">
                <Page :total="100" show-total />
            </div>
        </Card>
        <Modal
            v-model="modal"
            title="新增"
            width="800"
            @on-ok="handleSubmit"
            @on-cancel="handleDrawerCancel"
        >
            <Form :model="formItem" :label-width="80">
                <Row :gutter="12">
                    <Col span="12">
                        <FormItem label="姓名" required>
                            <Input v-model="formItem.input" placeholder="请输入"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="手机号">
                            <Input v-model="formItem.phone" placeholder="请输入"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="性别">
                            <RadioGroup v-model="formItem.gender">
                                <Radio label="男">男</Radio>
                                <Radio label="女">女</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="岗位" required>
                            <Select v-model="formItem.post">
                                <Option value="医助">医助</Option>
                                <Option value="客服">客服</Option>
                                <Option value="管理员">管理员</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    </Row>
                    <Row :gutter="12">
                    <Col span="12">
                        <FormItem label="部门">
                            <Select v-model="formItem.department">
                                <Option value="医助">医助</Option>
                                <Option value="客服">客服</Option>
                                <Option value="门诊">门诊</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="角色" required>
                            <Select v-model="formItem.role" multiple>
                                <Option value="医助（内置）">医助（内置）</Option>
                                <Option value="客服（内置）">客服（内置）</Option>
                                <Option value="管理员">管理员</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="诊室">
                            <Select v-model="formItem.room">
                                <Option value="诊室1">诊室1</Option>
                                <Option value="诊室2">诊室2</Option>
                                <Option value="诊室3">诊室3</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="帐号">
                            <Input v-model="formItem.accounts" disabled placeholder="请输入"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="密码">
                            <Input v-model="formItem.password" placeholder="请输入"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="确认密码">
                            <Input v-model="formItem.confirm" placeholder="请输入"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="状态">
                            <i-switch v-model="formItem.switch">
                                <span slot="open">On</span>
                                <span slot="close">Off</span>
                            </i-switch>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'diagnosis',
        data () {
            return {
                modal: false,
                formInline: {
                    post: '',
                    role: '',
                    room: '',
                    department: ''
                },
                formItem: {
                    input: '',
                    phone: '',
                    gender: '',
                    post: '',
                    role: '',
                    room: '',
                    department: '',
                    accounts: '',
                    password: '',
                    confirm: '',
                    switch: true
                },
                formItem1: {
                    interset: ''
                },
                columns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '手机号',
                        key: 'phone'
                    },
                    {
                        title: '部门',
                        key: 'department'
                    },
                    {
                        title: '诊室',
                        key: 'room'
                    },
                    {
                        title: '岗位',
                        key: 'post'
                    },
                    {
                        title: '角色',
                        key: 'role'
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                data: [
                    {
                        name: '王艳',
                        phone: '13588685658',
                        department: '诊室',
                        room: '一诊',
                        post: '医助',
                        role: '医助（内置角色）',
                        status: '0'
                    },
                    {
                        name: '高玲',
                        phone: '18988685658',
                        department: '客服部',
                        room: '二诊',
                        post: '客服',
                        role: '客服（内置角色）',
                        status: '1'
                    }
                ]
            }
        },
        methods: {
            handleAllocation () {
                this.modal = true;
            },
            handleDrawerCancel () {
                this.$Message.warning('已取消!');
            },
            handleSubmit () {
                this.$Message.success('操作成功!');
            }
        }
    }
</script>

<style scoped>
</style>
